<template>
  <div id="app">
	<Nav></Nav>
	<div class="order-part">
		<div class="step-top" >
			<el-steps :active="1" align-center>
				<el-step title="加入购物车"></el-step>
				<el-step title="生产订单"></el-step>
				<el-step title="激活订单"></el-step>
				<el-step title="支付"></el-step>
			</el-steps>			
		</div>
		<div class="address-part">
			<p>填写收货地址</p>
			<ul class="address-lists">
				<li v-for="(v,i) in addressList" :key='i'>
					<label><input name="choose" type="radio" @click="sendAdd(v.addressId)" > {{v.province}} {{v.city}} {{v.addressTel}} {{v.addressEmail}} </label>
					<span class="mod" @click="changeAddress(v)">修改</span>|<span class="del" @click="delAddress(v.addressId)">删除</span>
				</li>
				<li>
					<div class="add" @click="addAddress">+ 新添地址</div>
				</li>
			</ul>
		</div>
		<div class="goods-part">
			<p>商品信息</p>
			<p class="cls">家具</p>
			<ul class="goods-lists">
				<li v-for="(v,i) in carts" :key = "i" class="first-li">
					<div class="goods-img">
						<img src="v.picUrl" alt="">
					</div>
					<div class="detail">
						<span style="width: 160px;">{{v.itemTitleName}}</span>
						<span style="width: 196px;">{{v.color}}/{{v.size}}</span>
						<span style="width: 72px;">{{v.amount}}件</span>
						<span style="width: 148px;">{{v.price}}</span>
						<span style="width: 36px;" class="delgoods" @click="delCart(v)">x</span>
						
					</div>
				</li>
				<li>
					<div class="discount">
						<span>商品金额:</span>
					</div>
					<span class="price">￥{{totalPrice}}</span>
				</li>
				<li>
					<div class="discount">
						<div >
							<span>减免运费:</span>
							<span>￥160</span>
						</div>
						<span>运费:</span>
					</div>
					<span class="price">￥0</span>
				</li>
				<li>
					<div class="discount">
						<div>
							<span>减免包装费:</span>
							<span>￥72</span>
						</div>
						<span>包装费:</span>
					</div>
					<span class="price">￥0</span>
				</li>
				<li>
					<div class="discount">
						<span>商品总额:</span>
					</div>
					<span class="price">￥{{totalPrice}}</span>
				</li>
			</ul>
		</div>
		<div class="sub">
			<div>
				<span>已选择{{carts.length}}件商品</span>
				<span class="total-price">总共:￥{{totalPrice}}</span>
			</div>
			<button type="button" @click='addOreder()'>提交订单</button>
		</div>
		

	</div>
	
	<div class="pop-box" v-if="show">
		<div class="popUp" >
			<span class="cancel" @click="popUp">X</span>
			<ul class="ipt-list">
				<li>
					<div>
						<input type="text" placeholder="姓名" v-model="username" v-on:blur="checkName">
						<i class="el-icon-success" v-if="nameT == 1"></i>
						<i class="el-icon-error" v-else-if="nameT == 2"></i>
					</div>
					<div>
						<input type="text" placeholder="邮箱" v-model="email" v-on:blur="checkEmail">
						<i class="el-icon-success" v-if="emailT == 1"></i>
						<i class="el-icon-error" v-else-if="emailT == 2"></i>
					</div>
					
				</li>
				<li>
					<div>
						<input type="text" placeholder="电话" v-model="tel" v-on:blur="checkTel">
						<i class="el-icon-success" v-if="telT == 1"></i>
						<i class="el-icon-error" v-else-if="telT == 2"></i>
					</div>
					<v-distpicker hide-area name="sjld"  :province="select.province" :city= "select.city" @province="onChangeProvince" @city="onChangeCity"></v-distpicker>
				</li>
				<li>
					<div>
						<input type="text" placeholder="备份电话" v-model="belTel" v-on:blur="checkBel">
						<i class="el-icon-success" v-if="beT == 1"></i>
						<i class="el-icon-error" v-else-if="beT == 2"></i>
					</div>
					<div>
						<input type="text" placeholder="详细地址" v-model="detailAdd" v-on:blur="checkAdd">
						<i class="el-icon-success" v-if="addT == 1"></i>
						<i class="el-icon-error" v-else-if="addT == 2"></i>
					</div>
				</li>
				<li>
					<button type="button" @click="regText">{{msg}}</button>
				</li>
			</ul>
			
		</div>
	</div>
	<Footer></Footer>
  </div>
  
</template>

<script>
	import VDistpicker from 'v-distpicker';
	import Nav from '../../components/Nav.vue';
	import Footer from '../../components/Footer.vue';
	import axios from 'axios';
	let token =localStorage.getItem('token');
	// let arr = [
	// 	{
	// 		userId:1,
	// 		carId:2,
	// 		picUrl:'44',
	// 		itemTitleName:'床1',
	// 		itemId:6,
	// 		price:3000,
	// 		color:"蓝色",
	// 		size:"M",
	// 		amount:1,
	// 		allMoney:3000
	// 	},
	// 	{
	// 		userId:1,
	// 		carId:3,
	// 		picUrl:'44',
	// 		itemTitleName:'床2',
	// 		itemId:6,
	// 		price:44444,
	// 		color:"蓝色",
	// 		size:"M",
	// 		amount:1,
	// 		allMoney:44444
	// 	},
	// 	{
	// 		userId:1,
	// 		carId:4,
	// 		picUrl:'44',
	// 		itemTitleName:'床3',
	// 		itemId:6,
	// 		price:44444,
	// 		color:"黑色",
	// 		size:"M",
	// 		amount:1,
	// 		allMoney:44444,
			
	// 	}
	// ]
	// localStorage.setItem('order',JSON.stringify(arr))
	let cartList = JSON.parse(localStorage.getItem('order'))  || [];
	export default {
		data(){
			return {
				show:false,
				nameT:0,
				emailT:0,
				telT:0,
				beT:0,
				addT:0,
				username:'',
				tel:'',
				email:'',
				belTel:'',
				detailAdd:'',
				select:{ province: '广东省', city: '广州市'},
				addressList:[],
				msg:'添加地址',
				addressId:'',
				carts:cartList,
				totalPrice:0,
				orderAddressId:''
			}
		},
		methods:{
			sendAdd(v){
				this.orderAddressId = v
			},
			popUp() {
				this.show = !this.show
			},
			regText() {
				if(this.msg == '修改地址'){
					this.show = false;
					this.$message({
						message: '修改成功!',
						type: 'success'
					});
					let json = {
								province: this.select.province,
								city:this.select.city,
								addressDetail:this.detailAdd,
								addressTel:this.tel,
								addressEmail: this.email,
								receiverName: this.username,
								addressId:this.addressId
							};
					this.$axios({
						url:'http://129.28.184.223:8080/altAddress',
						method:'post',
						headers:{
							'token': token
						},
						data:{
							...json
						}
					})
						.then((res) =>{
							console.log(res)
							this.getAddress()
							
						})
						.catch(function (error) {
							console.log(error);
						});	
				}else if(this.checkAdd()&&this.checkBel()&&this.checkTel()&&this.checkEmail()&&this.checkName()){
					let json = {
								province: this.select.province,
								city:this.select.city,
								addressDetail:this.detailAdd,
								addressTel:this.tel,
								addressEmail: this.email,
								receiverName: this.username
							};
					this.$axios({
						url:'http://129.28.184.223:8080/addAddress',
						method:'post',
						headers:{
							'token': token
						},
						data:{
							...json
						}
					})
						.then((res) =>{
							console.log(res)
							this.getAddress()
						})
						.catch(function (error) {
							console.log(error);
						});	
					this.show = false;
					this.$message({
						message: '提交成功!',
						type: 'success'
					});
					
					
				}
			},
			checkName() {
				let reg3 =  /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/;
				if(reg3.test(this.username)){
					this.nameT = 1;
					return true;
				}else {
					this.nameT =2
					return false;
				}
			},
			checkEmail() {
				let reg2 = /^[A-Za-z0-9]+([_][A-Za-z0-9]+)*@([A-Za-z0-9])*.+[A-Za-z]{2,6}$/;
				if(reg2.test(this.email)){
					this.emailT = 1;
					return true;
				}else {
					this.emailT =2;
					return false;
				}
			},
			checkTel() {
				let reg1 = /^1[3456789]\d{9}$/;
				if(reg1.test(this.tel)){
					this.telT = 1
					return true;
				}else {
					this.telT =2;
					return false;
				}
			},
			checkBel() {
				let reg1 = /^1[3456789]\d{9}$/;
				if(reg1.test(this.belTel)){
					this.beT = 1;
					return true;
				}else {
					this.beT =2;
					return false;
				}
			},
			checkAdd() {
				let reg4 = /^([\u4E00-\u9FA5A-Za-z0-9_]+(省|市|区|县|道|路|街|号)){2,}$/;
				if(reg4.test(this.detailAdd)){
					this.addT = 1;
					return true;
				}else {
					this.addT =2;
					return false;
				}
			},
			addAddress() {
				this.popUp();
				this.select.province = '';
				this.select.city = '';
				this.detailAdd = '';
				this.tel = '';
				this.belTel = '';
				this.email = '';
				this.username = '';
				this.addressId = '';
				this.msg = '添加地址';
				this.nameT = ''
				this.addT = ''
				this.telT = ''
				this.beT = ''
				this.emailT = ''
			},
			delAddress(i) {
				this.$axios({
					url:'http://129.28.184.223:8080/delAddress',
					method:'post',
					headers:{
						'token': token
					},
					data:{
						addressId:i
					}
				})
					.then((res) =>{
						console.log(res)
						this.getAddress()
					})
					.catch(function (error) {
						console.log(error);
					});
			},
			getAddress() {
				axios.get('http://129.28.184.223:8080/getAddress',{
					headers:{
						'token': token
					}
				})
					.then((res) =>{
						console.log(res)
						this.addressList = res.data.data;
					})
					.catch(function (error) {
						console.log(error);
					});
			},
			onChangeProvince(a) {
				this.select.province = a.value;
			},
			onChangeCity(a){
				this.select.city = a.value
			},
			changeAddress(v) {
				this.popUp();
				this.select.province = v.province;
				this.select.city = v.city;
				this.detailAdd = v.addressDetail;
				this.tel = v.addressTel;
				this.belTel = v.addressTel;
				this.email = v.addressEmail;
				this.username = v.receiverName;
				this.addressId = v.addressId
				this.msg = '修改地址'		
			},
			delCart(value) {
				this.$message({
					message: '删除成功!',
					type: 'success'
				});
				this.carts.forEach((v,i) => {
					
					if(v.carId == value.carId){
						this.carts.splice(i,1);
						this.totalPrice -= v.allMoney
						localStorage.setItem('order',JSON.stringify(this.carts));
					}
				})
			},
			addOreder() {
				let userid = cartList[0].userId
				let item = []
				this.carts.forEach((v,i) => {
					item[i] = {
						itemId:v.itemId,
						money:v.allMoney,
						addressId:this.orderAddressId,
						userId:userid,
						state:0
					}
				})
				this.$axios({
					url:'http://129.28.184.223:8080/Order/addOrders',
					method:'post',
					headers:{
						'token': token
					},
					data:{
						item
					}
				})
					.then((res) =>{
						console.log(res)
					})
					.catch(function (error) {
						console.log(error);
					});
			}
		},
		created() {
			this.getAddress()
			console.log(this.carts)
			this.carts.forEach((v) => {
				this.totalPrice += v.allMoney
			})
		},
		components: { VDistpicker,Footer,Nav },
	}
</script>

<style scoped lang="less">
* {
	margin: 0;
	padding: 0;
	
}	
html,body {
	height: 100%;
	width: 100%;
}

ul,li {
	list-style: none;
}
	
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  height: 100%;
  width: 100%;


}

.order-part {
	width: 1100px;
	margin: 150px auto;
	color: #888888;
	.step-top {
		margin-top: 60px;
	}
	.address-part {
		padding-top: 40px;
		font-size: 18px;
		color: rgb(51, 51, 51);
		p {
			text-align: center;	
		}
		ul.address-lists {
			margin-top: 44px;
			background-color: rgb(242, 242, 242);
			padding: 20px 20px 0;
			overflow: hidden;
			li {
				font-size: 14px;
				line-height: 20px;
				margin-bottom: 8px;
				label {
					color: #888888;
				}
				.mod,.del {
					padding: 5px 8px;
					font-size: 12px;
					color: #d0aa8c;
					cursor: pointer;
				}
				.add {
					font-size: 14px;
					display: inline-block;
					color: #d0aa8c;
					padding: 5px 8px;
					cursor: pointer;
				}
			}
		}
	}
	
	.goods-part {
		font-size: 18px;
		color: rgb(51, 51, 51);
		margin-top: 100px;
		p {
			text-align: center;	
		}
		.cls {
			text-align: left;
			font-size: 16px;
			padding: 20px 5px;
		}
		.goods-lists {
			li {
				margin-bottom: 1px;
				background-color: rgb(242, 242, 242);
				overflow: hidden;
				font-size: 12px;
				&.first-li {
					background-color: #FFFFFF;
				}
				
				.goods-img {
					width: 326px;
					padding: 20px 5px;
					float: left;
					img {
						width: 120px;
						display: block;
						height: 80px;
					}
				}
				.detail {
					float: right;
					height: 120px;
					span {
						display: inline-block;
						font-size: 14px;
						padding: 0px 5px;
						line-height: 120px;
						&.delgoods {
							cursor: pointer;
						}
					}
				}
				.discount {
					float: left;
					width: 1010px;
					padding: 8px 5px;
					text-align: right;
					div {
						color: #d0aa8c;
						display: inline-block;
						margin-right: 10px;
					}
				}
				.price {
					display: block;
					float: right;
					width: 60px;

					padding: 8px 5px;
					text-align: left;
				}
				&:last-child {
					font-size: 14px;
				}
			}
		}
	}
	
	.sub {
		margin-top: 140px;
		display: flex;
		background-color: rgb(242, 242, 242);
		font-size: 14px;
		div {
			width: 976px;
			padding: 0 20px;
			height: 58px;
			line-height: 58px;
			display: flex;
			justify-content: space-between;
			.total-price {
				color: #333333;
			}
		}
		button {
			height: 58px;
			width: 124px;
			background: #000000;
			color: #FFFFFF;
			border: none;
			font-size: 16px;
			cursor: pointer;
			outline: none;
		}
	}
}
.pop-box {
	overflow: hidden;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: #00000087;
	z-index: 9999;
	.popUp {
		.cancel {
			position: absolute;
			right: 25px;
			top: 25px;
			font-size: 20px;
		}
		background-color: #FFFFFF;
		padding: 65px 72px 40px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -499px;
		margin-top: -188px;
		i {
			position: absolute;
			height: 10px;
			width: 10px;
		}
		.ipt-list {
			li {
				width: 854px;
				height: 50px;
				display: flex;
				justify-content: space-between;
				margin-bottom: 18px;
				div {
					position: relative;
					input {
						width: 400px;
						height: 50px;
						border: none;
						border-bottom: 1px solid #333333;
						outline: none;
					}
					i {
						position: absolute;
						right: 10px;
						top: 17px;
						
						&.el-icon-success {
							color: #009900;
						}
						&.el-icon-error {
							color: #f91b1f;
						}
					}
				}
				button {
					margin-left:264px;
					height: 50px;
					width: 325px;
					background-color: #000000;
					color: #FFFFFF;
					border: none;
					cursor: pointer;
					outline: none;
				}
				.distpicker-address-wrapper  {
					width: 400px;
				}
			}
	
		}
	}
}
</style>
